<template>
  <div class="container">
    <div class="left-side">
      <div class="panel">
        <h1 style="margin-left: 30px">创建问题</h1>
        <!--<DataPanel />-->
        <!--<ContentChart />-->
      </div>
      <!--选择是什么问题-->
      <div>
          <a-tabs default-active-key="2">
            <a-tab-pane key="1" title="选择题">
              <div
                   style="display: flex;
                          justify-content: center;
                          align-items: center;"
              >
                <!--:style="{ width: '360px' }" -->
                <a-card title="选择题">
                  <template #extra>
                    <a-link>More</a-link>
                  </template>
                  <a-form :model="form" :style="{width:'600px'}" @submit="handleSubmit">
                    <a-form-item field="name" label="题干">
                      <a-input v-model="form.stem" placeholder="请输入选择题题干……" />
                    </a-form-item>
                    <a-form-item field="post" label="选项A">
                      <a-input v-model="form.option1" placeholder="请输入选项A……" />
                    </a-form-item>
                    <a-form-item field="post" label="选项B">
                      <a-input v-model="form.option2" placeholder="请输入选项B……" />
                    </a-form-item>
                    <a-form-item field="post" label="选项C">
                      <a-input v-model="form.option3" placeholder="请输入选项C……" />
                    </a-form-item>
                    <a-form-item field="post" label="选项D">
                      <a-input v-model="form.option4" placeholder="请输入选项D……" />
                    </a-form-item>
                    <!--<a-form-item field="isRead">-->
                    <!--  <a-checkbox v-model="form.isRead">-->
                    <!--    I have read the manual-->
                    <!--  </a-checkbox>-->
                    <!--</a-form-item>-->
                    <a-form-item>
                      <a-button html-type="submit">确定</a-button>
                    </a-form-item>
                  </a-form>
                </a-card>
              </div>

            </a-tab-pane>
            <a-tab-pane key="2" title="填空题">
              Content of Tab Panel 2
            </a-tab-pane>
            <a-tab-pane key="3" title="简答题">
              Content of Tab Panel 3
            </a-tab-pane>
          </a-tabs>
      </div>
      <!--<a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">-->
      <!--  <a-grid-item-->
      <!--    :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"-->
      <!--  >-->
      <!--    <PopularContent />-->
      <!--  </a-grid-item>-->
      <!--  <a-grid-item-->
      <!--    :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"-->
      <!--  >-->
      <!--    <CategoriesPercent />-->
      <!--  </a-grid-item>-->
      <!--</a-grid>-->
    </div>
    <!--<div class="right-side">-->
    <!--  <a-grid :cols="24" :row-gap="16">-->
    <!--    <a-grid-item :span="24">-->
    <!--      <div class="panel moduler-wrap">-->
    <!--        <QuickOperation />-->
    <!--        <RecentlyVisited />-->
    <!--      </div>-->
    <!--    </a-grid-item>-->
    <!--    <a-grid-item class="panel" :span="24">-->
    <!--      <Carousel />-->
    <!--    </a-grid-item>-->
    <!--    <a-grid-item class="panel" :span="24">-->
    <!--      <Announcement />-->
    <!--    </a-grid-item>-->
    <!--    <a-grid-item class="panel" :span="24">-->
    <!--      <Docs />-->
    <!--    </a-grid-item>-->
    <!--  </a-grid>-->
    <!--</div>-->
  </div>
</template>

<script lang="ts">
import {reactive} from 'vue';

export default {
  name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component

  setup() {
    const form = reactive({
      stem: '',
      option1:'',
      option2:'',
      option3:'',
      option4:'',
      isRead: false,
    })
    const handleSubmit = (data) => {
      console.log(data)
    }

    return {
      form,
      handleSubmit
    }
  },
}
</script>

<style lang="less" scoped>
  .container {
    background-color: var(--color-fill-2);
    padding: 16px 20px;
    padding-bottom: 0;
    display: flex;
  }

  .left-side {
    flex: 1;
    overflow: auto;
  }

  .right-side {
    width: 280px;
    margin-left: 16px;
  }

  .panel {
    background-color: var(--color-bg-2);
    border-radius: 4px;
    overflow: auto;
  }
  :deep(.panel-border) {
    margin-bottom: 0;
    border-bottom: 1px solid rgb(var(--gray-2));
  }
  .moduler-wrap {
    border-radius: 4px;
    background-color: var(--color-bg-2);
    :deep(.text) {
      font-size: 12px;
      text-align: center;
      color: rgb(var(--gray-8));
    }

    :deep(.wrapper) {
      margin-bottom: 8px;
      text-align: center;
      cursor: pointer;

      &:last-child {
        .text {
          margin-bottom: 0;
        }
      }
      &:hover {
        .icon {
          color: rgb(var(--arcoblue-6));
          background-color: #e8f3ff;
        }
        .text {
          color: rgb(var(--arcoblue-6));
        }
      }
    }

    :deep(.icon) {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-bottom: 4px;
      color: rgb(var(--dark-gray-1));
      line-height: 32px;
      font-size: 16px;
      text-align: center;
      background-color: rgb(var(--gray-1));
      border-radius: 4px;
    }
  }
</style>

<style lang="less" scoped>
  // responsive
  .mobile {
    .container {
      display: block;
    }
    .right-side {
      // display: none;
      width: 100%;
      margin-left: 0;
      margin-top: 16px;
    }
  }
</style>
